@radius: 5px;
@input-background-color: #505659;
@input-hover-color: #424242;
@label-color: #b3bbbf;
.property-editor {
  position: fixed;
  top: 140px;
  right: 200px;
  width: 300px;
  background-color: #283032;
  color: white;
  border-radius: 5px;
  z-index: 10;
  font-size: 14px;
  .property-editor-title {
    background-color: #283032;
    border-top-left-radius: @radius;
    border-top-right-radius: @radius;
    padding: 5px 10px;
    overflow: hidden;
    cursor: move;
    .title {
      float: left;
    }
    > i {
      float: right;
      cursor: pointer;
    }
  }
  .property-editor-detail {
    border-bottom-left-radius: @radius;
    border-bottom-right-radius: @radius;
    background: #3a3f41;
    .property-panel-detail {
      .label {
        color: @label-color;
        font-size: 12px;
      }
      .row {
        margin-top: 10px;
        &:first-of-type {
          margin-top: 0px;
        }
      }
      .ant-checkbox-wrapper {
        &:hover,
        &:focus {
          .ant-checkbox {
            &-inner {
              background-color: @input-hover-color;
            }
          }
        }
        .ant-checkbox {
          &-inner {
            background-color: @input-background-color;
            border-color: @input-background-color;
          }
        }
      }
      .ant-radio-wrapper {
        color: @label-color;
        &:hover,
        &:focus {
          .ant-radio {
            &-inner {
              background-color: @input-hover-color;
            }
          }
        }
        .ant-radio {
          &-inner {
            background-color: @input-background-color;
            border-color: @input-background-color;
            &::after {
              background-color: white;
            }
          }
        }
      }
      .ant-input-number {
        &-handler-wrap {
          background-color: @input-background-color;
        }
        &-handler {
          &-up,
          &-down {
            &-inner {
              color: white;
            }
            &:hover {
              background-color: @input-hover-color;
            }
            &:active {
              background-color: @input-hover-color;
            }
          }
        }
        font-size: 14px;
        background-color: @input-background-color;
        border: none;
        color: white;
        border-radius: 0;
        width: 100%;
        &:hover,
        &:focus {
          background-color: @input-hover-color;
        }
      }
      .ant-input {
        font-size: 14px;
        background-color: @input-background-color;
        border: none;
        color: white;
        border-radius: 0;
        width: 100%;
        &:hover,
        &:focus {
          background-color: @input-hover-color;
        }
      }
      .ant-select {
        width: 100%;
        &-selection {
          background-color: @input-background-color;
          color: white;
          border: none;
          box-shadow: none;
          &:hover,
          &:focus {
            background-color: @input-hover-color;
          }
        }
        &-arrow {
          color: white;
        }
      }
      .submit-btn {
        text-align: center;
        margin-top: 20px;
        button {
          background-color: #686e71;
          border: 1px solid #707679;
          font-size: 14px;
          color: white;
          margin-right: 10px;
          &:hover {
            background-color: #6f7577;
          }
        }
      }
    }
    .ant-tabs-content {
      margin-top: -16px;
      color: white;
      > .ant-tabs-tabpane {
        background-color: #5f6568;
        padding: 16px;
      }
    }
    .ant-tabs-bar {
      border: none;
      color: white;
      text-align: center;
      .ant-tabs-tab {
        color: #5a6165;
        border-color: transparent;
        background: transparent;
        &-active {
          color: white;
          background: #5f6568;
        }
        &:hover {
          color: white;
        }
      }
    }
  }
}

.properties-panle-dropdown {
  background-color: @input-hover-color;
  .ant-select-dropdown-menu {
    &-item {
      color: white;
    }
    &-item-selected {
      background-color: @input-hover-color;
      color: #f1f100;
    }
    &-item-active {
      background-color: #242627;
    }
  }
}


.picker{
  width: 240px !important;
  input {
    color: #000000 !important;
  }
}